<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div style="margin-top:10px">
          <el-button icon="el-icon-plus" type="primary" size="mini" @click="addData" v-if="p1">新增</el-button>
          <el-button icon="el-icon-close" type="danger" size="mini" @click="deleteAny" v-if="p4">删除</el-button>
        </div>
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="模板名称" label-width="90px">
              <el-input v-model="tableSearchParam.name" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="模板名称"
            property="name">
          </el-table-column>
          <el-table-column
            label="来源"
            width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.from==1">运营平台</span>
              <span v-else-if="scope.row.from==0">救援公司</span>
            </template>
          </el-table-column>
          <el-table-column
            label="可用范围"
            width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.useRange==0">公有</span>
              <span v-else>私有</span>
            </template>
          </el-table-column>
          <el-table-column
            property="createdTime"
            label="创建时间"
            width="150">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                type="success"
                v-if="p2"
                @click="editData(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                size="mini"
                icon="el-icon-check"
                v-if="p3"
                @click="editUseRange(scope.$index, scope.row)">设置可用范围
              </el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-close"
                v-if="p4"
                @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="基本信息" :visible.sync="dialogBaseFormVisible" top="10vh" width="55%">
      <el-form :model="formData" :rules="rules" ref="ruleForm" style="margin-left: 150px">
        <el-form-item label="模板名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="formData.name" auto-complete="off" style="width:200px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="handleNext">下一步</el-button>
      </div>
    </el-dialog>
    <el-dialog title="模板定义" :visible.sync="dialogFormVisible" top="10vh" width="85%">
      <el-form :model="formData" :rules="rules" ref="ruleForm">
        <el-tabs tab-position="left" type="border-card" style="height: 420px;" @tab-click="handleProcessClick"
                 v-model="activeName">
          <el-tab-pane label="接单出发" style="margin-left:10px">
            <el-tabs v-model="activeName0">
              <el-tab-pane :label="item.groupName" :name="index" v-for="(item,index) in templateConfig" v-if="index<=1"
              >
                <div style="margin-top:10px">
                  <el-row :gutter="30">
                    <el-col :span="10">
                      <label>未选择</label>
                      <!--<el-button type="primary" @click="deleteAny">选中</el-button>-->
                      <el-table
                        :data="item.formItems"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="214"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column label="操作" width="75">
                          <template slot-scope="scope">
                            <el-button
                              type="primary"
                              @click="handleSelectItem(scope.$index, scope.row,item.formItems,item.values)">选中
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col el-col :span="14">
                      <label>已选择</label>
                      <!--<el-button type="danger" @click="deleteAny">撤销</el-button>-->
                      <el-table
                        :data="item.values"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="175"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column
                          label="是否必填"
                          prop="musted"
                          width="55">
                          <template slot-scope="scope">
                            {{scope.row.musted == 1 ? '是' : '否'}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sort"
                          label="排序码"
                          width="60">
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                          <template slot-scope="scope">
                            <el-button
                              type="warning"
                              @click="settingItemData(scope.$index, scope.row,item.values)">设置
                            </el-button>
                            <el-button
                              type="danger"
                              @click="handleNoSelectItem(scope.$index, scope.row,item.formItems,item.values)">撤销
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>

                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="接车出发">
            <el-tabs v-model="activeName1">
              <el-tab-pane :label="item.groupName" :name="index" v-for="(item,index) in templateConfig" :key="item.value"
                           v-if="index>1 && index<=5">
                <div style="margin-top:10px">
                  <el-row :gutter="30">
                    <el-col :span="10">
                      <label>未选择</label>
                      <!--<el-button type="primary" @click="deleteAny">选中</el-button>-->
                      <el-table
                        :data="item.formItems"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="214"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column label="操作" width="75">
                          <template slot-scope="scope">
                            <el-button
                              type="primary"
                              @click="handleSelectItem(scope.$index, scope.row,item.formItems,item.values)">选中
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col el-col :span="14">
                      <label>已选择</label>
                      <!--<el-button type="danger" @click="deleteAny">撤销</el-button>-->
                      <el-table
                        :data="item.values"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="175"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column
                          label="是否必填"
                          prop="musted"
                          width="55">
                          <template slot-scope="scope">
                            {{scope.row.musted == 1 ? '是' : '否'}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sort"
                          label="排序码"
                          width="60">
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                          <template slot-scope="scope">
                            <el-button
                              type="warning"
                              @click="settingItemData(scope.$index, scope.row,item.values)">设置
                            </el-button>
                            <el-button
                              type="danger"
                              v-if="scope.row.id!='9a8263a882e64d509b8854619e1fa828'"
                              @click="handleNoSelectItem(scope.$index, scope.row,item.formItems,item.values)">撤销
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>

                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="到达目的地">
            <el-tabs v-model="activeName2">
              <el-tab-pane :label="item.groupName" :name="index" v-for="(item,index) in templateConfig" :key="item.value"
                           v-if="index>5 && index<=7">
                <div style="margin-top:10px">
                  <el-row :gutter="30">
                    <el-col :span="10">
                      <label>未选择</label>
                      <!--<el-button type="primary" @click="deleteAny">选中</el-button>-->
                      <el-table
                        :data="item.formItems"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="214"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column label="操作" width="75">
                          <template slot-scope="scope">
                            <el-button
                              type="primary"
                              @click="handleSelectItem(scope.$index, scope.row,item.formItems,item.values)">选中
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col el-col :span="14">
                      <label>已选择</label>
                      <!--<el-button type="danger" @click="deleteAny">撤销</el-button>-->
                      <el-table
                        :data="item.values"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="175"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column
                          label="是否必填"
                          prop="musted"
                          width="55">
                          <template slot-scope="scope">
                            {{scope.row.musted == 1 ? '是' : '否'}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sort"
                          label="排序码"
                          width="60">
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                          <template slot-scope="scope">
                            <el-button
                              type="warning"
                              @click="settingItemData(scope.$index, scope.row,item.values)">设置
                            </el-button>
                            <el-button
                              type="danger"
                              v-if="scope.row.id!='272f42b2293040448ba24f0140a1a031'"
                              @click="handleNoSelectItem(scope.$index, scope.row,item.formItems,item.values)">撤销
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>

                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="服务评价">
            <el-tabs v-model="activeName3">
              <el-tab-pane :label="item.groupName" :name="index" v-for="(item,index) in templateConfig" v-if="index==8" :key="item.value">
                <div style="margin-top:10px">
                  <el-row :gutter="30">
                    <el-col :span="10">
                      <label>未选择</label>
                      <!--<el-button type="primary" @click="deleteAny">选中</el-button>-->
                      <el-table
                        :data="item.formItems"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="214"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column label="操作" width="75">
                          <template slot-scope="scope">
                            <el-button type="primary" @click="handleSelectItem(scope.$index, scope.row,item.formItems,item.values)">选中</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                    <el-col el-col :span="14">
                      <label>已选择</label>
                      <!--<el-button type="danger" @click="deleteAny">撤销</el-button>-->
                      <el-table
                        :data="item.values"
                        height="250"
                        border
                        style="width: 100%">
                        <el-table-column
                          type="selection"
                          width="55">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          width="175"
                          label="字段信息">
                        </el-table-column>
                        <el-table-column
                          label="是否必填"
                          prop="musted"
                          width="55">
                          <template slot-scope="scope">
                            {{scope.row.musted == 1 ? '是' : '否'}}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="sort"
                          label="排序码"
                          width="60">
                        </el-table-column>
                        <el-table-column label="操作" width="150">
                          <template slot-scope="scope">
                            <el-button
                              type="warning"
                              @click="settingItemData(scope.$index, scope.row,item.values)">设置
                            </el-button>
                            <el-button
                              type="danger"
                              @click="handleNoSelectItem(scope.$index, scope.row,item.formItems,item.values)">撤销
                            </el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-col>
                  </el-row>

                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="handlePrev">上一步</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd" v-if="actionType=='add'" :loading="loading">保存</el-button>
        <el-button type="primary" @click="handleEdit" v-else :loading="loading">修改</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设置可用范围" :visible.sync="dialogUseRangeFormVisible" top="10vh" width="55%">
      <el-form :model="formData" :rules="rules" ref="ruleForm" style="margin-left: 150px">
        <el-form-item label="可用范围" :label-width="formLabelWidth" prop="name">
          <el-radio v-model="formData.useRange" label="0">公有</el-radio>
          <el-radio v-model="formData.useRange" label="1">私有</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUseRange" :loading="loading">保存</el-button>
      </div>
    </el-dialog>
    <el-dialog title="设置表单项" :visible.sync="dialogForItemVisible" top="10vh" width="55%">
      <el-form :model="formItemData" style="margin-left: 150px">
        <el-form-item label="名称" :label-width="formLabelWidth">
          {{formItemData.name}}
        </el-form-item>
        <el-form-item label="是否必填" :label-width="formLabelWidth">


          <el-select v-model="formItemData.musted">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <!--<el-radio-group v-model="formItemData.musted">-->
          <!--<el-radio :label="1">必填</el-radio>-->
          <!--<el-radio :label="0">非必填</el-radio>-->
          <!--</el-radio-group>-->
        </el-form-item>
        <el-form-item label="排序码" :label-width="formLabelWidth">
          <el-input-number v-model="formItemData.sort" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSettingItem" :loading="loading">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }
</style>

<script>
  import electronicWorksheetsTemplateApi from '@/api/electronicWorksheetsTemplateApi'
  import formTemplateConfigApi from '@/api/formTemplateConfigApi'

  export default {
    created() {
      this.p1 = this.permissionValid.validAction(this.permissionValid.permissionRule.electronicWorksheetsTemplate.addElectronicWorksheetsTemplate)
      this.p2 = this.permissionValid.validAction(this.permissionValid.permissionRule.electronicWorksheetsTemplate.updateElectronicWorksheetsTemplate)
      this.p3 = this.permissionValid.validAction(this.permissionValid.permissionRule.electronicWorksheetsTemplate.updateUseRange)
      this.p4 = this.permissionValid.validAction(this.permissionValid.permissionRule.electronicWorksheetsTemplate.removeElectronicWorksheetsTemplate)

      this.initData()
    },
    data() {
      return {
        options: [{
          value: 0,
          label: '非必填'
        }, {
          value: 1,
          label: '必填'
        }],
        dialogForItemVisible: false,
        p1: false,
        p2: false,
        p3: false,
        p4: false,
        titles: ['未选择', '已选择'],
        templateConfig: [],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          name: ''
        },
        dialogUseRangeFormVisible: false,
        dialogBaseFormVisible: false,
        dialogFormVisible: false,
        formLabelWidth: '80px',
        formData: {
          name: '',
          useRange: '',
          templateSetting: []
        },
        loading: false,
        actionType: '',
        multipleSelection: [],
        rules: {
          name: [
            {required: true, message: '请输入模板名称', trigger: 'blur'},
            {max: 50, message: '长度不超过50 个字符', trigger: 'blur'}
          ]
        },
        activeName: '0',
        activeName0: 0,
        activeName1: 0,
        activeName2: 0,
        activeName3: 0,
        process0: ['51326d4d8c7f4c9b84bce5a9fbcb8f79', '80eda68beeab46d28e3ea233d4c05c00'],
        process1: ['d17ca818684f4132a30e3406caa0f963', 'eec2d87aa06d4a23848425163dff89ad', '0ebf54e1c24349cf9e04f0a2af390e73', '6e5d1cd75d114cd78cb7f65cf9d51d7c'],
        process2: ['2811e120f64048899596eb97a306afbb', '505b88042094496198397180fa5308ff'],
        process3: ['15e1d5f18f624f7e910518601f084a82'],
        temSelectItem: [],
        formItemData: {},
        process: [
          {pid: '51326d4d8c7f4c9b84bce5a9fbcb8f79', pname: '接单信息'},
          {pid: '80eda68beeab46d28e3ea233d4c05c00', pname: '车辆信息'},
          {pid: 'd17ca818684f4132a30e3406caa0f963', pname: '现场信息'},
          {pid: 'eec2d87aa06d4a23848425163dff89ad', pname: '作业环境'},
          {pid: '0ebf54e1c24349cf9e04f0a2af390e73', pname: '车况'},
          {pid: '6e5d1cd75d114cd78cb7f65cf9d51d7c', pname: '服务协议'},
          {pid: '2811e120f64048899596eb97a306afbb', pname: '目的地信息'},
          {pid: '505b88042094496198397180fa5308ff', pname: '结案信息'},
          {pid: '15e1d5f18f624f7e910518601f084a82', pname: '服务评价'}
        ]
      }
    },
    methods: {
      handleSelectItem(index, row, noSelectItem, selectItem) {
        console.log(row)
        noSelectItem.splice(index, 1)
        row.musted = 0
        row.sort = selectItem.length + 1
        selectItem.push(row)
      },
      handleNoSelectItem(index, row, noSelectItem, selectItem) {
        selectItem.splice(index, 1)
        let newRow = {}
        newRow.id = row.id
        newRow.name = row.name
        noSelectItem.push(newRow)
      },
      settingItemData(index, row, selectItem) {
        this.formItemData = {
          musted: 0,
          sort: 99
        }
        this.formItemData.id = row.id
        this.formItemData.name = row.name
        this.formItemData.musted = row.musted
        this.formItemData.sort = row.sort
        this.temSelectItem = selectItem
        this.dialogForItemVisible = true
      },
      handleSettingItem() {
        let index = 0
        for (var si of this.temSelectItem) {
          if (si.id === this.formItemData.id) {
            si.musted = this.formItemData.musted
            si.sort = this.formItemData.sort
            this.temSelectItem.splice(index, 1)
            this.temSelectItem.push(si)
            break
          }
          index++
        }
        this.dialogForItemVisible = false
      },
      initData() {
        //this.listAllFormTemplateConfig()
        this.listTableData()
      },
      listAllFormTemplateConfig() {
        formTemplateConfigApi.listAll({templateId: '6f69a0df0c704e3ba80460c597708bc7'}, (res) => {
          this.templateConfig = res
        }, () => {
        })
      },
      listTableData() {
        electronicWorksheetsTemplateApi.listElectronicWorksheetsTemplate(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      addData() {
        formTemplateConfigApi.listAll({templateId: '6f69a0df0c704e3ba80460c597708bc7'}, (res) => {
          this.templateConfig = res
          this.formData = {
            name: '',
            templateSetting: []
          }

          this.actionType = 'add'
          this.dialogBaseFormVisible = true
          this.dialogFormVisible = false

        }, () => {
        })
        //清空历史值
      },
      handleAdd() {
//        this.formData.templateSetting = []
//        this.setGroup(0, this.process0)
//        this.setGroup(1, this.process1)
//        this.setGroup(2, this.process2)
//        this.setGroup(3, this.process3)
//        this.formData.formId = '6f69a0df0c704e3ba80460c597708bc7'
//        console.log(this.formData)
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.formData.templateSetting = []
            this.setGroup(0, this.process0)
            this.setGroup(1, this.process1)
            this.setGroup(2, this.process2)
            this.setGroup(3, this.process3)
            this.formData.formId = '6f69a0df0c704e3ba80460c597708bc7'
            this.loading = true
            for (var ts of this.formData.templateSetting) {
              for (var gs of ts.groups)
                if (gs.forItems.length == 0 && gs.groupId != '15e1d5f18f624f7e910518601f084a82') {
                  this.$message({
                    message: this.getProcessName(gs.groupId) + '至少添加一项',
                    type: 'warning'
                  })
                  this.loading = false
                  return
                }
            }

            electronicWorksheetsTemplateApi.addElectronicWorksheetsTemplate(this.formData, (res) => {
              this.loading = false
              this.dialogFormVisible = false
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.activeName = '0'
              this.activeName0 = '0'
              this.initData()
            }, () => {
              this.loading = false
            })
          }
        })
      },
      getProcessName(pid) {
        for (var p of this.process) {
          if (p.pid === pid) {
            return p.pname
          }
        }
        return ''
      },
      setGroup(index, process) {
        const q = {
          process: index + '',
          groups: []
        }
        for (var tc of this.templateConfig) {
          if (process.indexOf(tc.formGroupOrItemId) != -1) {
            const p = {
              groupId: tc.formGroupOrItemId,
              forItems: tc.values
            }
            q.groups.push(p)
          }
        }
        this.formData.templateSetting.push(q)
      },
      editData(index, row) {
        this.activeName = '0'
        this.activeName0 = '0'
        //清空历史值
        this.formData = {
          code: '',
          name: '',
          description: ''

        }
        let that = this
        that.actionType = 'edit'
        this.loading = true
        electronicWorksheetsTemplateApi.getElectronicWorksheetsTemplate(row.id, (res1) => {
          that.formData = res1
          this.templateConfig = res1.templateSetting
          console.log(res1.templateSetting);
          that.formData.id = row.id
          this.loading = false
          that.dialogFormVisible = false
          that.dialogBaseFormVisible = true
        }, () => {
          this.loading = false
        })
      },
      handleEdit() {
        this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
            this.formData.templateSetting = []
            this.setGroup(0, this.process0)
            this.setGroup(1, this.process1)
            this.setGroup(2, this.process2)
            this.setGroup(3, this.process3)
            this.formData.formId = '6f69a0df0c704e3ba80460c597708bc7'
            this.loading = true

            for (var ts of this.formData.templateSetting) {
              for (var gs of ts.groups)
                if (gs.forItems.length == 0 && gs.groupId != '15e1d5f18f624f7e910518601f084a82') {
                  this.$message({
                    message: this.getProcessName(gs.groupId) + '至少添加一项',
                    type: 'warning'
                  })
                  this.loading = false
                  return
                }
            }

            electronicWorksheetsTemplateApi.updateElectronicWorksheetsTemplate(this.formData.id, this.formData, (res) => {
              this.loading = false
              this.dialogFormVisible = false
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.activeName = '0'
              this.activeName0 = '0'
              this.initData()
            }, () => {
              this.loading = false
            })
          }
        })

      },
      handleDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          electronicWorksheetsTemplateApi.deleteSingleElectronicWorksheetsTemplate(row.id, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = []
        for (var ms of val) {
          this.multipleSelection.push(ms.id)
        }
      },
      deleteAny() {
        if (this.multipleSelection.length == 0) {
          this.$message({
            type: 'warning',
            message: '请选择记录!'
          })
          return;
        }
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          electronicWorksheetsTemplateApi.removeElectronicWorksheetsTemplate(this.multipleSelection, (res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initData()
          }, () => {
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleNext() {
        this.dialogBaseFormVisible = false
        this.dialogFormVisible = true
      },
      handlePrev() {
        this.dialogBaseFormVisible = true
        this.dialogFormVisible = false
      },
      editUseRange(index, row) {
        this.formData.useRange = row.useRange
        this.formData.id = row.id
        this.dialogUseRangeFormVisible = true
      },
      handleUseRange() {
        electronicWorksheetsTemplateApi.updateUseRange(this.formData.id, this.formData.useRange, (res) => {
          this.dialogUseRangeFormVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.initData()
        }, () => {
        })
      },
      handleClick() {

      },
      handleProcessClick(value) {
        if (value.index == 0) {
          this.activeName0 = '0'
        } else if (value.index == 1) {
          this.activeName1 = 2
        } else if (value.index == 2) {
          this.activeName2 = 6
        } else if (value.index == 3) {
          this.activeName3 = 8
        }
      }
    }
  }
</script>
